<template>
  <view style="margin-bottom: 20px;">
    <!-- 代取送 -->
    <view class="orders-box-1">
      <!-- 订单类型+价格 -->
      <view class="orders-type-price">
        <view class="cu-tag" :class="typeColor">{{order.type}}</view>
        <view class="text-red text-lg" v-if="order.type!=='万能帮'">
          ￥{{order.price}}
        </view>
      </view>
      <!-- 订单地址信息 -->
      <view class="text-green orders-address" v-if="order.type!=='万能帮'" @click="getOrderInfo()">
        <view class="cuIcon-locationfill start-address" v-if="order.pickAddress.name || order.shopAddress.name">
          <text class="addres-info">{{order.pickAddress.name || order.shopAddress.name}}</text>
        </view>
        <view class="text-red" v-else>
          提醒：就近购买
        </view>
        <view class="cuIcon-locationfill end-address">
          <text class="addres-info">{{order.deliveryAddress.name}}</text>
        </view>
      </view>
      <!-- 万能帮信息 -->
      <view class="text-green orders-content" v-else>
        <view class="cuIcon-infofill text-blue">
          <text class="addres-info"> {{order.helpInfo.content}}</text>
        </view>
        <!-- 图片显示区域 -->
        <view class="cu-form-group" style="padding: 0;" v-if="imgList.length>0">
          <view class="grid col-4 grid-square flex-sub">
            <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
              <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 用户信息 -->
      <view class="user-info">
        <view class="message">
          <view class="cu-avatar user-pic" :style="{backgroundImage: `url(${userPic})`}" v-if="userPic"></view>
          <view class="nickname">
            {{userName}}
          </view>
          <view class="phone">
            {{userPhone}}
          </view>
        </view>
        <view class="time-count">
          <!-- <view class="" v-if="order.type!=='万能帮'">
            接单剩余时间:
            <text class="count-down">{{'00:30:00'}}</text>
          </view> -->
          <view class="">
            发布时间:
            <text class="count-down">{{order.publishTime || order.payTime}}</text>
          </view>
          <button v-if="order.type!=='万能帮'" class="cu-btn round shadow" :class="typeColor" style="width:70px ;"
            @click="goTakingOrders">
            接单
          </button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    mapState,
    mapActions,
    mapMutations
  } from 'vuex'
  const db = uniCloud.database();
  export default {
    name: "rush-orders-card",
    data() {
      return {
        userInfo: [],
        imgList: [],
      };
    },
    props: ['order'],
    created() {
      this.getUserInfo()
    },
    methods: {
      ...mapActions('m_runner', ['takingOrders', 'getAllOrderList']),
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url
        });
      },
      async getUserInfo() {
        const {
          result: res
        } = await db.collection("my_user").where({
          _id: this.order.userId
        }).get()
        // console.log(res.data);
        this.userInfo = res.data[0]
        if (this.order.type === '万能帮') {
          this.imgList = this.order.helpInfo.imgList;
        }
        // this.$parent.loadedCount++
        // console.log(this.loadedCount);
        // if(this.loadedCount===this.$parent.allOrderList.length){
        //   this.$parent.loadModal=false
        // }
      },
      getOrderInfo() {
        this.$emit('get-order-Info', this.order)
      },
      //接单按钮事件回调
      async goTakingOrders() {
        const orderInfo = {
          orderInfo: this.order,
          userId: this.userInfo._id,
          userInfo: {
            userName: this.userInfo.user_name,
            userPhone: this.userInfo.user_phone,
          },
          runnerId: this.runnerInfo._id,
          runnerInfo: {
            runnerName: this.runnerInfo.runnerName,
            runnerPhone: this.runnerInfo.runnerPhone,
          },
          finished: false,
          state: '待取货'
        }
        console.log('orderInfo/', orderInfo);
        const res = await this.takingOrders(orderInfo)
        if (res.id) {
          this.getAllOrderList();
          this.$parent.refreshOrder();
          uni.$showMsg('接单成功！')
        }

      },
    },
    computed: {
      ...mapState('m_runner', ['runnerInfo']),
      userName() {
        return this.userInfo.user_name
      },
      userPhone() {
        return this.userInfo.user_phone
      },
      userPic() {
        return this.userInfo.avatarUrl
      },
      typeColor() {
        if (this.order.type === '万能帮') return 'bg-blue'
        if (this.order.type === '代取送') return 'bg-green'
        if (this.order.type === '代购') return 'bg-yellow'
      }

    },
  }
</script>

<style lang="scss" scoped>
  .orders-box-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 10px auto;
    // height: 200px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px rgba(128, 128, 128, 0.5);
    /* 灰色四周阴影 */

    .orders-type-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      top: 10px;
      left: 16px;
      width: 90%;
      font-weight: 700;
      padding-bottom: 7px;
      border-bottom: none;
      /* 移除默认边框 */
      background-image: linear-gradient(to right, #dfdfdf 50%, transparent 50%);
      /* 黑色和透明交替的渐变 */
      background-size: 18px 2px;
      /* 渐变宽度（虚线宽度+间隔）和高度（边框厚度） */
      background-repeat: repeat-x;
      /* 水平重复渐变 */
      background-position: bottom;
      /* 渐变位置在底部 */
    }

    .orders-address,
    .orders-content {
      width: 90%;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      // margin: 10px 0;
      padding: 10px 0;
      border-bottom: 1px solid #dfdfdf;

      .addres-info {
        font-size: 14px;
        color: black;
        margin-left: 10px;
      }
    }


    .user-info {
      width: 90%;
      height: 75px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-start;

      .message {
        display: flex;
        align-items: center;
        justify-content: left;
        width: 100%;

        .user-pic {
          border-radius: 5000rpx;
          margin-right: 10px;
        }

        .nickname {
          font-size: 16px;
          font-weight: 700;
          margin-right: 5px;
        }
      }

      .time-count {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .count-down {
          font-size: 16px;
          margin-left: 5px;
          color: red;
        }
      }
    }
  }
</style>